<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/xiaomi2.css" type="text/css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="main">
        <div class="header">
            <div class="logo">
                <img src="./images/mi-logo.png">
                <div>
                    <p>小米商城</p>
                     <p>让每个人都能享受科技乐趣</p>
                </div>   
            </div>
        </div>
        <div class="content">
            <div class="form">
                <form action="/" method="get">
                    <div class="login" >
                        <span class="current active">账号登录</span>
                        |
                        <span class="saoma">扫码登录</span>
                    </div>
                    <div class="tab-content">
                        <div>
                            <div class="account"><input type="text" placeholder="邮箱/手机号/小米账号"></div>
                            <div class="password"><input type="password" placeholder="密码"></div>
                            <div class="submit"><input type="submit" value="立即登录"></div>
                            <div class="register">
                                <span>注册小米账号</span>
                                <span class="vertialbar">|</span>
                                <span>忘记密码?</span>
                            </div>
                            <div class="form-bottom">
                                <p class="qita">
                                    <span class="left"></span>
                                    其他方式登录
                                    <span class="right"></span>
                                </p>
                                <div class="all-icons">
                                    <a href="#" ><span class="qq"></span></a>
                                    <a href="#"><span  class="weibo"></span></a>
                                    <a href="#" ><span class="pay"></span></a>
                                    <a href="#" ><span class="weixin"></span></a>
                                </div>
                            </div>
                        </div>
                        <div class="tab-saoma">
                            <img src="./images/sao.png">
                            <p class="custom-qr-name">使用<span>小米商城APP</span>扫一扫</p>
                            <p>小米手机可打开「设置」&gt;「小米帐号」扫码登录</p>

                        </div>

                    </div>
                   
                </form>
            </div>
        </div>
        <div class="footer">
            <div class="footer-content">
                <p class="footer-top">
                    <span>简体</span>
                    <span class="vertialbar">|</span>
                    <span>繁体</span>
                    <span class="vertialbar">|</span>
                    <span>English</span>
                    <span class="vertialbar">|</span>
                    <span>常见问题</span>
                </p>
                <p class="footer-bottom">
                    小米公司版权所有-京ICP备10046444-<img src="./images/icon.png">京公网安备11010802020134号-京ICP证110507号
                </p>
            </div>
           
        </div>
    </p>

    <script>
        var $lis = $(".login >span");
        for(var i=0;i<$lis.length;i++){
         $lis[i].index=i;
        }
        $lis.click(function(){
            /* 1.点击当前元素添加class,给兄弟元素移除class */
            $(this).addClass("current").siblings().removeClass("current");
    
            /* 2.点击对应按钮,对应图片显示 */
            $(".tab-content").children().hide().eq(this.index).show();
        })
    </script>
    
</body>
</html>